<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>小康100首页</title>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			/*banner适配*/
			 /*手机*/  
			@media screen and (max-width:600px){  
			    .special-banner{
			    	height: 18rem;
			    }
			}  
			/*平板*/  
			@media screen and (min-width:600px) and (max-width:960px){  
			    .special-banner{
			    	height: 28rem;
			    }
			}  
			/*PC*/  
			@media screen and (min-width:960px){  
			    
			}  
			
			.container-fluid {
				margin: 0;
				padding: 0;
			}
			
			img {
				width: 100%;
				height: 100%;
			}
				
			.special-bg {
				background: #f1f1f1;
			}
			
			.container {
				margin-top: -30px;
			}
			
			.special-nav {
				height: 110px;
				background: #FFFFFF;
				border-radius: 5px;
				overflow: hidden;
				margin-bottom: 80px;
				color: #666666;
			}
			
			.special-head {
				height: 33px;
				line-height: 33px;
				background: #8ec73f;
				border-radius: 3px;
				color: #FFFFFF;
			}
			
			.special-body {
				margin-top: 26px;
				margin-bottom: 31px;
			}
			.media-body{
				color: #595757;
			}
			.media-heading{
				color: #37550e;
			}
			.return{
				text-align: center;
				margin: 40px 0;
			}
			.btn-su{
				background: #8ec73f;
				color: #FFFFFF;
				padding: 0 30px;
				line-height: 30px;
			}
			.btn-su:hover{
				color: #FFFFFF;
			}
			.special-footer{
				line-height: 27px;
				background: #8ec73f;
				text-align: center;
				color: #FFFFFF;
			}
			.progress-bar-bg{
				background: #fe8902;
			}
			.progress{
				border-radius: 13px;
				margin-top: 10px;
				background-color: #e4e4e4;
			}
			.num-ui{
				text-align: center;
			}
			.num-ui .num-li{
				width:14% ;
				float: left;
			}
			.num-ui .num{
				width: 25px;
				height: 25px;
				line-height: 25px;
				border-radius: 50%;
				color: #FFFFFF;
				margin: 0 auto;
				background: #e4e4e4;
			}
			.num-ui .title{
                padding-top: 8px;
			}
			.num-ui .num-1{
				background: #8fc742;
			}
			.num-ui .num-2{
				background: #ff8000;
			}
		</style>
	</head>

	<body>
		<div class="container-fluid special-bg">
			<div class="special-banner">
				<img src="image/c1.png" />
			</div>
			<div class="container">
				<div class="row">
					<div class="col-md-12 special-nav">
						<div class="progress">
							<div class="progress-bar progress-bar-bg" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
								<span class="sr-only">50% Complete (warning)</span>
							</div>
						</div>
						<div class="num-ui">
							<div class="num-li">
								<div class="num num-1">1</div>
								<p class="title">华北</p>
							</div>
							<div class="num-li">
								<div class="num num-2">2</div>
								<p class="title">华东</p>
							</div>
							<div class="num-li">
								<div class="num num-1">3</div>
								<p class="title">华南</p>
							</div>
							<div class="num-li">
								<div class="num num-2">4</div>
								<p class="title">新疆</p>
							</div>
							<div class="num-li">
								<div class="num">5</div>
								<p class="title">东北</p>
							</div>
							<div class="num-li">
								<div class="num">6</div>
								<p class="title">西北</p>
							</div>
							<div class="num-li">
								<div class="num">7</div>
								<p class="title">西南</p>
							</div>
						</div>
					</div>
				</div>

				<div class="row special-head">
					<div class="col-md-12">
						华北：
					</div>
				</div>
				<div class="row special-body">
					<div class="col-md-12">
						<div class="media">
							<div class="media-left">
								<a href="#">
									<img class="media-object" src="image/c2.png" style="width: 147px;height: 115px;" alt="...">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">华北</h4> 在沃野千里的华北平原，有来自山东半岛的美味海鲜和蔬菜，有来自中原大地的粮食和农产。
							</div>
						</div>
					</div>
				</div>
				<div class="row special-head">
					<div class="col-md-12">
						华东：
					</div>
				</div>
				<div class="row special-body">
					<div class="col-md-12">
						<div class="media">
							<div class="media-left">
								<a href="#">
									<img class="media-object" src="image/c3.png" style="width: 147px;height: 115px;" alt="...">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">华东</h4> 在河湖纵横的华东地区，有来自各大湖区的各种湖鲜河鲜，有来自茂密山林的春鲜冬鲜。
							</div>
						</div>
					</div>
				</div>
				<div class="row special-head">
					<div class="col-md-12">
						华南：
					</div>
				</div>
				<div class="row special-body">
					<div class="col-md-12">
						<div class="media">
							<div class="media-left">
								<a href="#">
									<img class="media-object" src="image/c4.png" style="width: 147px;height: 115px;" alt="...">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">华南</h4> 在终年温润的岭南地区（华南），我们享受着来自武夷山区的佳茗，享受着来自秦岭地区的腌腊美味。
							</div>
						</div>
					</div>
				</div>
				<div class="row special-head">
					<div class="col-md-12">
						新疆：
					</div>
				</div>
				<div class="row special-body">
					<div class="col-md-12">
						<div class="media">
							<div class="media-left">
								<a href="#">
									<img class="media-object" src="image/c5.png" style="width: 147px;height: 115px;" alt="...">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">新疆</h4>
								在祖国的边陲新疆西藏，香甜的瓜果，新鲜的奶制品，纯天然的蜂蜜，驰名世界的棉花和香料调味品，随着交通物流的快速发展，正在拉近与我们日常生活的距离。
							</div>
						</div>
					</div>
				</div>
				<div class="row special-head">
					<div class="col-md-12">
						东北：
					</div>
				</div>
				<div class="row special-body">
					<div class="col-md-12">
						<div class="media">
							<div class="media-left">
								<a href="#">
									<img class="media-object" src="image/c6.png" style="width: 147px;height: 115px;" alt="...">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">东北</h4> 在冰天雪地的东北，自古就是各种山珍野味的良床沃土。来自吉林的人参，黑龙江的木耳榛蘑，辽宁的优质大米，内蒙古的美味肉食，已经从过去权贵专享变成了现在的家常美味。
							</div>
						</div>
					</div>
				</div>
				<div class="row special-head">
					<div class="col-md-12">
						西北：
					</div>
				</div>
				<div class="row special-body">
					<div class="col-md-12">
						<div class="media">
							<div class="media-left">
								<a href="#">
									<img class="media-object" src="image/c7.png" style="width: 147px;height: 115px;" alt="...">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">西北</h4> 在干燥少雨的大西北，来自革命老区千年古都的米麦制品，有着“黄河九曲唯富一套”美誉的河套平原的特色产品，极大的丰富了我们当下人的味觉体验。
							</div>
						</div>
					</div>
				</div>
				<div class="row special-head">
					<div class="col-md-12">
						西南：
					</div>
				</div>
				<div class="row special-body">
					<div class="col-md-12">
						<div class="media">
							<div class="media-left">
								<a href="#">
									<img class="media-object" src="image/c8.png" style="width: 147px;height: 115px;" alt="...">
								</a>
							</div>
							<div class="media-body">
								<h4 class="media-heading">西南</h4> 在山峦叠嶂的西南地区，有来自云贵的各种菌子和鲜花，川渝地区的各种调味品和香料，来自八桂大地的香猪珍珠。这些优质的食材调料和高档工艺品，正在悄然的改变着我们的生活。
							</div>
						</div>
					</div>
				</div>
				
				<div class="row return">
					<div class="col-md-12">
						<button type="button" class="btn btn-su">返回首页</button>
					</div>
				</div>
				
			</div>
			
		</div>
		
		<div class="special-footer">
			CROPYRIGHT 2015-2018 城乡小康控股有限公司 版权所有
		</div>
	</body>